<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item>
          <el-button
            :key="'BtnArr' + index"
            v-for="(item, index) in buttonList"
            @click="getTableData4ButtonClick(item.date, item.selectType)"
          >{{item.buttonLable}} ({{item.number}})</el-button>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="分类" prop="username">
          <el-select v-model="searchForm.client_type" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="searchForm.carNo" placeholder="车牌号" style="width: 100px;"/>
        </el-form-item>
        <!-- <el-form-item label="预约日期" prop="bookingTime">
          <el-date-picker
            v-model="searchForm.bookingTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="handleSearchFormSubmit">
            <d2-icon name="search"/>&nbsp;查询
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button @click="handleSearchFormReset">
            <d2-icon name="refresh" />&nbsp;刷新
          </el-button>
        </el-form-item>-->
      </el-form>
    </template>
    <el-table :data="tableData" v-loading="loading" stripe highlight-current-row>
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column type="index" align="center" label="序号" width="60"></el-table-column> -->
      <el-table-column align="center" label="预约时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bookingTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车牌号" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.carNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车型" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleType}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分类" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.label}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车主" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.carOwner}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商业险到期日期" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.viEndDate | parseTime('{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.note}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.modificationDate | parseTime('{y}-{m}-{d} {h}:{m}:{s}')}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="车架号" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发动机编号" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.engineNumber}}</span>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="被保险人" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.insured}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="被保险人身份证" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.insuredIdCard}}</span>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="联系电话" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.mobilePhone}}</span>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="联系电话2" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.standbyMobile}}</span>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="续保日期" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.modificationDate | parseTime('{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>-->

      <el-table-column align="center" label="创建时间" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{m}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleDetial(scope.row)"
            icon="fa fa-bar-chart"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-pagination
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        :page-sizes="[25]"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin: -10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
  </d2-container>
</template>

<script>
import * as bookingService from "@/api/booking";
import * as newcomer from "@/api/newcomer";

export default {
  name: "预约客户",
  data() {
    return {
      last_selectType: "",
      last_selectDate: "",
      options3: [],
      buttonList: [],
      searchForm: {
        carNo: "",
        client_type: ""
      },
      loading: false,
      tableData: [],
      multipleSelection: [],
      page: {
        current: 1,
        size: 25,
        total: 0
      },
      sort: {
        prop: "",
        order: ""
      },
      user: {},
      editFormVisible: false,
      userRoleDialogVisible: false
    };
  },
  mounted() {
    this.getTableData();

    bookingService.weekButtonList().then(resp => {
      console.log(resp);
      this.buttonList = resp.result;
    });

    newcomer.queryDictListByType("clientType").then(resp => {
      console.log(resp);
      this.options3 = resp.records;
    });
  },
  methods: {
    handleDetial(row) {
      this.$confirm("确认消费预约么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        bookingService.changeStatusById(row.reserveId).then(resp => {
          console.log(resp);
        });
      });

      if(row.firstRegistrationDate != null)
        row.firstRegistrationDate = row.firstRegistrationDate.split(" ")[0];

      this.$router.push({
        path: "/customer/detail",
        query: { id: row.id, clientName: row.carOwner, obj: row }
      });
    },

    getTableData() {
      const formatDate = (time) => {
        // 格式化日期，获取今天的日期
        const Dates = new Date(time);
        const year = Dates.getFullYear();
        const month =
          Dates.getMonth() + 1 < 10
            ? "0" + (Dates.getMonth() + 1)
            : Dates.getMonth() + 1;
        const day =
          Dates.getDate() < 10 ? "0" + Dates.getDate() : Dates.getDate();
        return year + "-" + month + "-" + day;
      };

      const _date = formatDate( new Date().getTime() ) +  " 00:00:00"; // 当前时间

      let query = {
        page: this.page.current,
        limit: this.page.size,
        // sortBy: this.sort.prop,
        // descending: this.sort.order === "descending",
        car_no: this.searchForm.carNo == null ? null : this.searchForm.carNo,
        client_type: this.searchForm.client_type,
        // 默认分页给个特殊值
        bookingTime: "2099-12-31 00:00:00",
        selectType: null
      };

      bookingService.fetchList(query).then(data => {
        this.tableData = data.records;
        this.page.total = data.total;
      });
    },

    getTableData4ButtonClick(_date, selectType) {
      this.last_selectDate = _date;
      this.last_selectType = selectType;

      _date = _date + " 00:00:00";

      let query = {
        page: 1,
        limit: this.page.size,
        bookingTime: _date,
        selectType: selectType
      };

      bookingService.fetchList(query).then(data => {
        this.tableData = data.records;
        this.page.total = data.total;
      });
    },

    getTableData2(_date, selectType) {
      if(_date == "")
        _date = "2099-12-31";
      if(selectType == "")
        selectType = null;

      this.last_selectDate = _date;
      this.last_selectType = selectType;

      _date = _date + " 00:00:00";

      let query = {
        page: this.page.current,
        limit: this.page.size,
        bookingTime: _date,
        selectType: selectType
      };

      bookingService.fetchList(query).then(data => {
        this.tableData = data.records;
        this.page.total = data.total;
      });
    },

    handleSearchFormSubmit() {
      this.page.current = 1;
      this.getTableData();
    },
    handleSearchFormReset() {
      this.$refs.searchForm.resetFields();
    },
    handleSortChange(val) {
      this.sort.prop = val.prop;
      this.sort.order = val.order;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.getTableData2(this.last_selectDate, this.last_selectType);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getTableData2(this.last_selectDate, this.last_selectType);
    },
    del(id) {
      this.$confirm("确认删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消"
      }).then(() => {
        bookingService.del(id).then(() => {
          this.getTableData();
        });
      });
    }
  }
};
</script>
<style>
.el-row {
  width: 1024px;
}
</style>

